<template>
  <div>
    <el-card>
      <template slot="header">混合颜色生成</template>
      <el-form inline>
        <el-form-item label="颜色1"><el-input placeholder="请输入" v-model="colorForm.color1"></el-input></el-form-item>
        <el-form-item label="颜色2"><el-input placeholder="请输入" v-model="colorForm.color2"></el-input></el-form-item>
        <el-form-item label="比重"><el-input placeholder="请输入" v-model="colorForm.weight"></el-input></el-form-item>

        <el-form-item>
          <el-button type="primary">生成</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-divider></el-divider>

    <el-card>
      <template slot="header">关联颜色生成</template>

      <theme-form @form-change="generate($event)"></theme-form>
      <theme-result :code="themeResult"></theme-result>
    </el-card>

    <el-divider></el-divider>

    <el-card>
      <template slot="header">按钮颜色生成</template>

      <theme-form @form-change="buttonGenerate($event)"></theme-form>

      <theme-result :code="buttonResult"></theme-result>
    </el-card>

    <el-divider></el-divider>

    <el-card>
      <template slot="header">Tag颜色生成</template>

      <theme-form @form-change="tagGenerate($event)" type="tag"></theme-form>

      <theme-result :code="tagResult"></theme-result>
    </el-card>
    <el-divider></el-divider>

    <el-card>
      <template slot="header">link-button颜色生成</template>

      <theme-form @form-change="linkGenerate($event)"></theme-form>

      <theme-result :code="linkResult"></theme-result>
    </el-card>
  </div>
</template>

<script>
import { generateTheme, buttonGenerate, tagGenerate, linkButtonGenerate } from './generateTheme';
import ThemeForm from "@/pages/css-var-generate/ThemeForm";
import ThemeResult from "@/pages/css-var-generate/ThemeResult";

export default {
  name: 'CssVarGenerate',
  components: {ThemeResult, ThemeForm},
  data() {
    return {
      colorForm: { color1: null, color2: null, weight: null },
      themeResult: {},
      buttonResult: {},
      tagResult: {},
      linkResult: {}
    }
  },
  methods: {
    generate(form) {
      this.$set(this, 'themeResult', generateTheme(form))
    },
    buttonGenerate(form) {
      this.$set(this, 'buttonResult', buttonGenerate(form));
    },
    tagGenerate(form) {
      this.$set(this, 'tagResult', tagGenerate(form));
    },
    linkGenerate(form) {
      this.$set(this, 'linkResult', linkButtonGenerate(form));
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
